<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.6 (461470)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-08-28 03:29:43 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2021-03-08 13:08:11 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day05：vue项目 - 组件库 + 首页</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、VUE的组件库介绍</h1>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">PC端</h3>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;"><a href="https://element.eleme.cn/#/zh-CN" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">element</a></li>
<li style="line-height: 160%; box-sizing: content-box;"><a href="http://v1.iviewui.com/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">iview</a></li>
<li style="line-height: 160%; box-sizing: content-box;"><a href="https://ant.design/index-cn" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">antd</a></li>
<li style="line-height: 160%; box-sizing: content-box;">...</li>
</ol>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">mobile</h3>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;"><a href="https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">vant</a></li>
<li style="line-height: 160%; box-sizing: content-box;"><a href="http://mint-ui.github.io/#!/zh-cn" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">mint-ui</a></li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、移动端项目的页面优化</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">横屏处理<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">@<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">media</span> all and (orientation:landscape){
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">html</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">font-size</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;}
}
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">屏幕的安全距离</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、配置UI库并测试 - vant</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">安装</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">npm i vant -S</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">引入 - 自动按需引入组件 (推荐)</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">下载babel-plugin-import插件，负责在编译过程中将 import 的写法自动转换为按需引入的方式
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">npm i babel-plugin-import -D</code></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在 babel.config.js 中配置<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">module</span>.exports = {
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">plugins</span>: [
    [<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'import'</span>, {
      <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">libraryName</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vant'</span>,
      <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">libraryDirectory</span>: <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'es'</span>,
      <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>: <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>
    }, <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vant'</span>]
  ]
};
</code></pre>
</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">使用 - button组件示例</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> Vue <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vue'</span>;
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> { Button } <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'vant'</span>;

Vue.use(Button);
</code></pre>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">van-button</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"primary"</span>&gt;</span>主要按钮<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">van-button</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">根据 <a href="https://youzan.github.io/vant/#/zh-CN/button" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">文档说明</strong></a> ，按需使用</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、使用vant库完善首页布局</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">添加<a href="https://youzan.github.io/vant/#/zh-CN/swipe" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">轮播图组件</a></p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">封装axios接口请求</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// src -&gt; api -&gt; index.js</span>
<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">import</span> axios <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">from</span> <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'axios'</span>

<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">export</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">function</span> <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">getBanner</span> (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"/>) </span>{
  <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> axios.get(<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">'http://localhost:3000/api/banner'</span>)
}

<span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">请求分类数据，添加<a href="https://youzan.github.io/vant/#/zh-CN/grid" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">宫格组件</a>，实现分类导航</p>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">请求商品数据，添加<a href="https://youzan.github.io/vant/#/zh-CN/card" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">卡片组件</a>，实现商品列表</p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">四、上拉加载数据</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/list" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">List组件</a> 实现上拉加载数据
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。</p>
</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">
<p style="line-height: 160%; box-sizing: content-box; color: #333; margin: 0;">若数据已全部加载完毕，则直接将finished设置成true即可。</p>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">van-list</span>
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"loading"</span>
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:finished</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"finished"</span>
  <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">finished-text</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"没有更多了"</span>
  @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">load</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"onLoad"</span>
&gt;</span>
  列表内容
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">van-list</span>&gt;</span>
</code></pre>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">methods: {
  onLoad () {
    setTimeout(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">()</span>=&gt;</span>{
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 开始异步请求数据</span>
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 本次数据更新成功后，将loading设置为false</span>
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.loading = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>

      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 如果所有数据已加载完毕，将finished设置为true</span>
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.finished = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>
    },<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1000</span>)
  }
}
</code></pre>
</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">五、下拉刷新数据</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">使用 <a href="https://youzan.github.io/vant/#/zh-CN/pull-refresh" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">PullRefresh组件</a> 完成下拉刷新数据
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">下拉刷新时会触发 refresh 事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将 v-model 设置为 false，表示加载完成。<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">van-pull-refresh</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"isLoading"</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">refresh</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"onRefresh"</span>&gt;</span>
  需要下拉的结构
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">van-pull-refresh</span>&gt;</span>
</code></pre>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">methods: {
  onRefresh() {
    setTimeout(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;"><span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">()</span> =&gt;</span> {
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 此处可以重新请求数据</span>
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// ...</span>
      <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 数据更新成功后，将isLoading设置为false</span>
      <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.isLoading = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>;
    }, <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1000</span>);
  },
},
</code></pre>
</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">六、回到顶部</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">添加回到顶部按钮，初始不显示</li>
<li style="line-height: 160%; box-sizing: content-box;">找到有滚动条的元素，添加滚动事件</li>
<li style="line-height: 160%; box-sizing: content-box;">在滚动事件中获取当前元素的滚动距离</li>
<li style="line-height: 160%; box-sizing: content-box;">当滚动到一定位置显示回到顶部按钮</li>
<li style="line-height: 160%; box-sizing: content-box;">给回到顶部按钮添加点击事件</li>
<li style="line-height: 160%; box-sizing: content-box;">点击回到顶部，将滚动元素的滚动距离设置为0</li>
</ol>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">提示：可使用ref属性给元素添加别名，方便在vue实例中获取元素</strong></p>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%20%E4%B8%80%E3%80%81VUE%E7%9A%84%E7%BB%84%E4%BB%B6%E5%BA%93%E4%BB%8B%E7%BB%8D%0A%23%23%23%20PC%E7%AB%AF%0A1.%20%5Belement%5D(https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN)%0A2.%20%5Biview%5D(http%3A%2F%2Fv1.iviewui.com%2F)%0A3.%20%5Bantd%5D(https%3A%2F%2Fant.design%2Findex-cn)%0A4.%20...%0A%23%23%23%20mobile%0A1.%20%5Bvant%5D(https%3A%2F%2Fvant-contrib.gitee.io%2Fvant%2F%23%2Fzh-CN%2Fquickstart)%0A2.%20%5Bmint-ui%5D(http%3A%2F%2Fmint-ui.github.io%2F%23!%2Fzh-cn)%0A%0A%0A%0A%23%20%E4%BA%8C%E3%80%81%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%A1%B9%E7%9B%AE%E7%9A%84%E9%A1%B5%E9%9D%A2%E4%BC%98%E5%8C%96%0A1.%20%E6%A8%AA%E5%B1%8F%E5%A4%84%E7%90%86%0A%20%20%20%20%60%60%60css%0A%20%20%20%20%40media%20all%20and%20(orientation%3Alandscape)%7B%0A%20%20%20%20%20%20%20%20html%7Bfont-size%3A100px%3B%7D%0A%20%20%20%20%7D%0A%20%20%20%20%60%60%60%0A2.%20%E5%B1%8F%E5%B9%95%E7%9A%84%E5%AE%89%E5%85%A8%E8%B7%9D%E7%A6%BB%0A%0A%23%20%E4%B8%89%E3%80%81%E9%85%8D%E7%BD%AEUI%E5%BA%93%E5%B9%B6%E6%B5%8B%E8%AF%95%20-%20vant%0A1.%20%E5%AE%89%E8%A3%85%0A%20%20%20%20-%20%60npm%20i%20vant%20-S%60%0A%0A2.%20%E5%BC%95%E5%85%A5%20-%20%E8%87%AA%E5%8A%A8%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5%E7%BB%84%E4%BB%B6%20(%E6%8E%A8%E8%8D%90)%0A%20%20%20%20-%20%E4%B8%8B%E8%BD%BDbabel-plugin-import%E6%8F%92%E4%BB%B6%EF%BC%8C%E8%B4%9F%E8%B4%A3%E5%9C%A8%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%B0%86%20import%20%E7%9A%84%E5%86%99%E6%B3%95%E8%87%AA%E5%8A%A8%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5%E7%9A%84%E6%96%B9%E5%BC%8F%0A%20%20%20%20%20%20%20%20-%20%60npm%20i%20babel-plugin-import%20-D%60%0A%20%20%20%20-%20%E5%9C%A8%20babel.config.js%20%E4%B8%AD%E9%85%8D%E7%BD%AE%0A%20%20%20%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20%20%20%20module.exports%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20plugins%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B'import'%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20libraryName%3A%20'vant'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20libraryDirectory%3A%20'es'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20style%3A%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%20'vant'%5D%0A%20%20%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%20%20%60%60%60%0A%0A3.%20%E4%BD%BF%E7%94%A8%20-%20button%E7%BB%84%E4%BB%B6%E7%A4%BA%E4%BE%8B%0A%20%20%20%20%60%60%60js%0A%20%20%20%20import%20Vue%20from%20'vue'%3B%0A%20%20%20%20import%20%7B%20Button%20%7D%20from%20'vant'%3B%0A%0A%20%20%20%20Vue.use(Button)%3B%0A%20%20%20%20%60%60%60%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%3Cvan-button%20type%3D%22primary%22%3E%E4%B8%BB%E8%A6%81%E6%8C%89%E9%92%AE%3C%2Fvan-button%3E%0A%20%20%20%20%60%60%60%0A%20%20%20%20-%20%E6%A0%B9%E6%8D%AE%20%5B**%E6%96%87%E6%A1%A3%E8%AF%B4%E6%98%8E**%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fbutton)%20%EF%BC%8C%E6%8C%89%E9%9C%80%E4%BD%BF%E7%94%A8%0A%20%20%20%20%0A%23%20%E4%B8%89%E3%80%81%E4%BD%BF%E7%94%A8vant%E5%BA%93%E5%AE%8C%E5%96%84%E9%A6%96%E9%A1%B5%E5%B8%83%E5%B1%80%0A%0A1.%20%E6%B7%BB%E5%8A%A0%5B%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fswipe)%0A%0A2.%20%E5%B0%81%E8%A3%85axios%E6%8E%A5%E5%8F%A3%E8%AF%B7%E6%B1%82%0A%20%20%20%20%60%60%60js%0A%20%20%20%20%2F%2F%20src%20-%3E%20api%20-%3E%20index.js%0A%20%20%20%20import%20axios%20from%20'axios'%0A%0A%20%20%20%20export%20function%20getBanner%20()%20%7B%0A%20%20%20%20%20%20return%20axios.get('http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fbanner')%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20%2F%2F%20...%0A%20%20%20%20%60%60%60%0A%20%20%20%20%0A3.%20%E8%AF%B7%E6%B1%82%E5%88%86%E7%B1%BB%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%B7%BB%E5%8A%A0%5B%E5%AE%AB%E6%A0%BC%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fgrid)%EF%BC%8C%E5%AE%9E%E7%8E%B0%E5%88%86%E7%B1%BB%E5%AF%BC%E8%88%AA%0A%0A4.%20%E8%AF%B7%E6%B1%82%E5%95%86%E5%93%81%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%B7%BB%E5%8A%A0%5B%E5%8D%A1%E7%89%87%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fcard)%EF%BC%8C%E5%AE%9E%E7%8E%B0%E5%95%86%E5%93%81%E5%88%97%E8%A1%A8%0A%0A%23%20%E5%9B%9B%E3%80%81%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE%0A1.%20%E4%BD%BF%E7%94%A8%20%5BList%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Flist)%20%E5%AE%9E%E7%8E%B0%E4%B8%8A%E6%8B%89%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE%0A%20%20%20%20-%20%E9%80%9A%E8%BF%87loading%E5%92%8Cfinished%E4%B8%A4%E4%B8%AA%E5%8F%98%E9%87%8F%E6%8E%A7%E5%88%B6%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81%EF%BC%8C%E5%BD%93%E7%BB%84%E4%BB%B6%E6%BB%9A%E5%8A%A8%E5%88%B0%E5%BA%95%E9%83%A8%E6%97%B6%EF%BC%8C%E4%BC%9A%E8%A7%A6%E5%8F%91load%E4%BA%8B%E4%BB%B6%E5%B9%B6%E5%B0%86loading%E8%AE%BE%E7%BD%AE%E6%88%90true%E3%80%82%0A%20%20%20%20-%20%E6%AD%A4%E6%97%B6%E5%8F%AF%E4%BB%A5%E5%8F%91%E8%B5%B7%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%E5%B9%B6%E6%9B%B4%E6%96%B0%E6%95%B0%E6%8D%AE%EF%BC%8C%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%E5%AE%8C%E6%AF%95%E5%90%8E%EF%BC%8C%E5%B0%86loading%E8%AE%BE%E7%BD%AE%E6%88%90false%E5%8D%B3%E5%8F%AF%E3%80%82%0A%20%20%20%20-%20%E8%8B%A5%E6%95%B0%E6%8D%AE%E5%B7%B2%E5%85%A8%E9%83%A8%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%EF%BC%8C%E5%88%99%E7%9B%B4%E6%8E%A5%E5%B0%86finished%E8%AE%BE%E7%BD%AE%E6%88%90true%E5%8D%B3%E5%8F%AF%E3%80%82%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%60%60%60html%0A%20%20%20%20%20%20%20%20%3Cvan-list%0A%20%20%20%20%20%20%20%20%20%20v-model%3D%22loading%22%0A%20%20%20%20%20%20%20%20%20%20%3Afinished%3D%22finished%22%0A%20%20%20%20%20%20%20%20%20%20finished-text%3D%22%E6%B2%A1%E6%9C%89%E6%9B%B4%E5%A4%9A%E4%BA%86%22%0A%20%20%20%20%20%20%20%20%20%20%40load%3D%22onLoad%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%E5%88%97%E8%A1%A8%E5%86%85%E5%AE%B9%0A%20%20%20%20%20%20%20%20%3C%2Fvan-list%3E%0A%20%20%20%20%20%20%20%20%60%60%60%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20onLoad%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20setTimeout(()%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%BC%80%E5%A7%8B%E5%BC%82%E6%AD%A5%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20...%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%9C%AC%E6%AC%A1%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%E6%88%90%E5%8A%9F%E5%90%8E%EF%BC%8C%E5%B0%86loading%E8%AE%BE%E7%BD%AE%E4%B8%BAfalse%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.loading%20%3D%20false%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%A6%82%E6%9E%9C%E6%89%80%E6%9C%89%E6%95%B0%E6%8D%AE%E5%B7%B2%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%AF%95%EF%BC%8C%E5%B0%86finished%E8%AE%BE%E7%BD%AE%E4%B8%BAtrue%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.finished%20%3D%20true%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C1000)%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%60%60%60%0A%0A%0A%23%20%E4%BA%94%E3%80%81%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E6%95%B0%E6%8D%AE%0A1.%20%E4%BD%BF%E7%94%A8%20%5BPullRefresh%E7%BB%84%E4%BB%B6%5D(https%3A%2F%2Fyouzan.github.io%2Fvant%2F%23%2Fzh-CN%2Fpull-refresh)%20%E5%AE%8C%E6%88%90%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E6%95%B0%E6%8D%AE%0A%20%20%20%20-%20%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E6%97%B6%E4%BC%9A%E8%A7%A6%E5%8F%91%20refresh%20%E4%BA%8B%E4%BB%B6%EF%BC%8C%E5%9C%A8%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0%E4%B8%AD%E5%8F%AF%E4%BB%A5%E8%BF%9B%E8%A1%8C%E5%90%8C%E6%AD%A5%E6%88%96%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%EF%BC%8C%E6%93%8D%E4%BD%9C%E5%AE%8C%E6%88%90%E5%90%8E%E5%B0%86%20v-model%20%E8%AE%BE%E7%BD%AE%E4%B8%BA%20false%EF%BC%8C%E8%A1%A8%E7%A4%BA%E5%8A%A0%E8%BD%BD%E5%AE%8C%E6%88%90%E3%80%82%0A%20%20%20%20%20%20%20%20%60%60%60html%0A%20%20%20%20%20%20%20%20%3Cvan-pull-refresh%20v-model%3D%22isLoading%22%20%40refresh%3D%22onRefresh%22%3E%0A%20%20%20%20%20%20%20%20%20%20%E9%9C%80%E8%A6%81%E4%B8%8B%E6%8B%89%E7%9A%84%E7%BB%93%E6%9E%84%0A%20%20%20%20%20%20%20%20%3C%2Fvan-pull-refresh%3E%0A%20%20%20%20%20%20%20%20%60%60%60%0A%20%20%20%20%20%20%20%20%60%60%60js%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20onRefresh()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%AD%A4%E5%A4%84%E5%8F%AF%E4%BB%A5%E9%87%8D%E6%96%B0%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20...%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%E6%88%90%E5%8A%9F%E5%90%8E%EF%BC%8C%E5%B0%86isLoading%E8%AE%BE%E7%BD%AE%E4%B8%BAfalse%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.isLoading%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%201000)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%60%60%60%0A%0A%23%20%E5%85%AD%E3%80%81%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%0A1.%20%E6%B7%BB%E5%8A%A0%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%8C%89%E9%92%AE%EF%BC%8C%E5%88%9D%E5%A7%8B%E4%B8%8D%E6%98%BE%E7%A4%BA%0A2.%20%E6%89%BE%E5%88%B0%E6%9C%89%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%9A%84%E5%85%83%E7%B4%A0%EF%BC%8C%E6%B7%BB%E5%8A%A0%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%0A3.%20%E5%9C%A8%E6%BB%9A%E5%8A%A8%E4%BA%8B%E4%BB%B6%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E5%85%83%E7%B4%A0%E7%9A%84%E6%BB%9A%E5%8A%A8%E8%B7%9D%E7%A6%BB%0A4.%20%E5%BD%93%E6%BB%9A%E5%8A%A8%E5%88%B0%E4%B8%80%E5%AE%9A%E4%BD%8D%E7%BD%AE%E6%98%BE%E7%A4%BA%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%8C%89%E9%92%AE%0A5.%20%E7%BB%99%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E6%8C%89%E9%92%AE%E6%B7%BB%E5%8A%A0%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%0A6.%20%E7%82%B9%E5%87%BB%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%EF%BC%8C%E5%B0%86%E6%BB%9A%E5%8A%A8%E5%85%83%E7%B4%A0%E7%9A%84%E6%BB%9A%E5%8A%A8%E8%B7%9D%E7%A6%BB%E8%AE%BE%E7%BD%AE%E4%B8%BA0%0A%0A**%E6%8F%90%E7%A4%BA%EF%BC%9A%E5%8F%AF%E4%BD%BF%E7%94%A8ref%E5%B1%9E%E6%80%A7%E7%BB%99%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E5%88%AB%E5%90%8D%EF%BC%8C%E6%96%B9%E4%BE%BF%E5%9C%A8vue%E5%AE%9E%E4%BE%8B%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0**%0A%0A%0A%0A%0A%0A</center></body></html>